// ==================== Button 组件样式文件 ====================
// 此文件定义了 Button 组件的所有样式变体和状态
// 使用 SCSS 变量和 Mixin 实现高度可定制化的按钮样式

// 导入主题变量和mixin文件
@import '../../styles/variables';
@import '../../styles/mixin';

// 基础按钮样式 - 所有按钮的通用基础样式
.btn {
  position: relative; // 相对定位，为内部伪元素或图标提供定位上下文
  display: inline-block; // 行内块级显示，支持设置宽高同时保持行内特性
  font-weight: $btn-font-weight; // 按钮字体粗细，通过变量控制（通常为 400 或 500）
  line-height: $btn-line-height; // 按钮行高，通过变量控制（通常为 1.5）
  color: $body-color; // 按钮文字颜色，使用主体文字颜色变量
  white-space: nowrap; // 禁止文字换行，确保按钮文字始终在一行显示
  text-align: center; // 文字水平居中显示
  vertical-align: middle; // 文字垂直居中对齐，与其他行内元素对齐
  background-image: none; // 清除默认背景图片，避免浏览器默认样式干扰
  border: $btn-border-width solid transparent; // 透明边框，宽度由变量控制（通常为 1px）

  // 使用 button-size mixin 设置按钮尺寸属性
  // 参数：垂直内边距，水平内边距，字体大小，边框圆角
  @include button-size(
    $btn-padding-y,
    $btn-padding-x,
    $btn-font-size,
    $border-radius
  );

  box-shadow: $btn-box-shadow; // 按钮阴影效果，通过变量控制（通常为轻微阴影）
  cursor: pointer; // 鼠标指针为手型，表示可点击元素
  transition: $btn-transition; // 过渡动画效果，通过变量控制（通常为 0.3s ease）

  // 禁用状态样式 - 当按钮被禁用时的视觉表现
  &.disabled,
  &[disabled] {
    cursor: not-allowed; // 禁用鼠标指针，显示为不可用状态
    opacity: $btn-disabled-opacity; // 透明度降低，通过变量控制（通常为 0.65）
    box-shadow: none; // 移除阴影效果，增强禁用状态的视觉表现

    // 禁用状态下所有子元素的指针事件处理
    > * {
      pointer-events: none; // 完全禁用子元素的鼠标事件，确保彻底禁用
    }
  }
}

// 大尺寸按钮变体 - 用于需要更突出显示的场合
.btn-lg {
  // 使用 button-size mixin 设置大尺寸按钮的尺寸属性
  @include button-size(
    $btn-padding-y-lg,
    // 大尺寸垂直内边距（通常为 0.5rem）
    $btn-padding-x-lg,
    // 大尺寸水平内边距（通常为 1rem）
    $btn-font-size-lg,
    // 大尺寸字体大小（通常为 1.25rem）
    $btn-border-radius-lg // 大尺寸边框圆角（通常为 0.3rem）
  );
}

// 小尺寸按钮变体 - 用于空间有限的紧凑布局
.btn-sm {
  // 使用 button-size mixin 设置小尺寸按钮的尺寸属性
  @include button-size(
    $btn-padding-y-sm,
    // 小尺寸垂直内边距（通常为 0.25rem）
    $btn-padding-x-sm,
    // 小尺寸水平内边距（通常为 0.5rem）
    $btn-font-size-sm,
    // 小尺寸字体大小（通常为 0.875rem）
    $btn-border-radius-sm // 小尺寸边框圆角（通常为 0.2rem）
  );
}

// 主要按钮样式 - 蓝色主题，用于主要操作
.btn-primary {
  // 使用 button-style mixin 设置主要按钮的颜色样式
  // 参数：背景颜色，边框颜色，文字颜色
  @include button-style($primary, $primary, $white);
}

// 危险按钮样式 - 红色主题，用于危险或删除操作
.btn-danger {
  // 使用 button-style mixin 设置危险按钮的颜色样式
  @include button-style($danger, $danger, $white);
}

// 默认按钮样式 - 灰白主题，用于次要操作
.btn-default {
  // 使用扩展的 button-style mixin 设置默认按钮的样式
  // 参数：默认背景色，默认边框色，默认文字色，悬停背景色，悬停边框色，悬停文字色
  @include button-style(
    $white,
    // 默认白色背景
    $gray-400,
    // 默认灰色边框
    $body-color,
    // 默认主体文字颜色
    $white,
    // 悬停时白色背景（保持不变）
    $primary,
    // 悬停时主要颜色边框
    $primary // 悬停时主要颜色文字
  );
}

// 链接按钮样式 - 外观像链接的按钮，用于导航或次要操作
.btn-link {
  font-weight: $font-weight-normal; // 正常字体粗细（400），区别于其他按钮的粗体
  color: $btn-link-color; // 链接颜色（通常为蓝色），通过变量控制
  text-decoration: $link-decoration; // 链接装饰样式（通常为下划线）
  box-shadow: none; // 无阴影效果，保持链接的扁平化外观

  // 悬停状态 - 鼠标悬停时的样式变化
  &:hover {
    color: $btn-link-hover-color; // 悬停时链接颜色（通常为深蓝色）
    text-decoration: $link-hover-decoration; // 悬停时装饰样式（通常为下划线加粗）
  }

  // 聚焦状态 - 键盘导航或点击后的焦点状态
  &:focus,
  &.focus {
    text-decoration: $link-hover-decoration; // 聚焦时保持悬停样式
    box-shadow: none; // 无阴影效果，避免焦点样式冲突
  }

  // 禁用状态 - 链接按钮被禁用时的样式
  &:disabled,
  &.disabled {
    color: $btn-link-disabled-color; // 禁用状态链接颜色（灰色）
    pointer-events: none; // 禁用所有指针事件，确保彻底禁用
  }
}
